<template>
	<view>
		<uni-search-bar v-model="searchValue" bgColor="#fff" cancelButton="none" @focus="toSearch" clearButton='none' />
		<v-tabs v-model="current" :tabs="tabs" @change="changeTab" field="name" lineHeight="6rpx" lineColor="red"
			:bold="false" activeColor="red" :scroll="false">
		</v-tabs>
		<view v-if="current===0">
			<SwiperCom :listImg="swiperLists" />
			<CardTitle>猜你喜欢</CardTitle>
			<CarItem :lists="commodityList" itemWidth="350rpx"></CarItem>
		</view>
		<view v-if="current===1">
			<block v-for="(i,j) in secondDatas" :key="j">
				<Banner v-if="i.type==='bannerList'" :dataList="i.url"></Banner>
				<Icons :list="i.data" v-if="i.type==='iconList'"></Icons>
				<template v-if="i.type==='hotList'">
					<CardTitle>热销精品</CardTitle>
					<CarItem :lists="i.data" itemWidth="250rpx" imgHeight="200rpx"></CarItem>
				</template>
				<template v-if="i.type==='shopList'">
					<CardTitle>推荐店铺</CardTitle>
					<Shop :dataList="i.data"></Shop>
				</template>
			</block>
		</view>
		<view v-if="current===2">
			<block v-for="(i,j) in secondDatas" :key="j">
				<Banner v-if="i.type==='bannerList'" :dataList="i.url"></Banner>
				<Icons :list="i.data" v-if="i.type==='iconList'"></Icons>
				<template v-if="i.type==='hotList'">
					<CardTitle>热销精品</CardTitle>
					<CarItem :lists="i.data" itemWidth="250rpx" imgHeight="200rpx"></CarItem>
				</template>
				<template v-if="i.type==='shopList'">
					<CardTitle>推荐店铺</CardTitle>
					<Shop :dataList="i.data"></Shop>
				</template>
			</block>
		</view>
		<view v-if="current===3">0</view>
		<uni-load-more :status="status" :content-text="contentText" />
		<Tabbar cureentPage='index'></Tabbar>
	</view>
</template>

<script>
	import SwiperCom from "@/components/index/SwiperCom.vue"
	import CarItem from "@/components/common/CarItem.vue"
	import Recommend from "@/components/index/Recommend.vue"
	import CardTitle from "@/components/common/CardTitle.vue"
	import Banner from "@/components/common/Banner.vue"
	import Icons from "@/components/index/Icons.vue"
	import Shop from "@/components/index/Shop.vue"
	import http from "@/common/api/reqeust.js"
	import Tabbar from '@/components/common/Tabbar.vue'


	export default {
		data() {
			return {
				swiperLists: [],
				current: 0,
				tabs: [],
				recommendList: [],
				commodityList: [],
				totalCount: 0,
				secondDatas: [],
				status: 'more',
				searchValue: '11',
				params: {
					page: 1,
					pageSize: 4
				},
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				}
			}
		},
		components: {
			SwiperCom,
			CarItem,
			Recommend,
			CardTitle,
			Banner,
			Icons,
			Shop,
			Tabbar
		},
		onLoad() {
			this.init()
			this.getList(this.params.page, this.params.pageSize)
		},
		// 监听原生标题栏按钮点击事件
		onNavigationBarButtonTap(e) {
			if (e.float === 'left')
				uni.navigateTo({
					url: "../search/search"
				})
		},
		methods: {
			getList(page, pageSize) {
				http.request({
					url: `/api/index/commodity_list`,
					data: {
						page,
						pageSize
					}
				}).then(res => {
					if (this.params.page > 1) {
						res.results = [...this.commodityList, ...res.results]
					}
					this.commodityList = res.results
					this.totalCount = res.totalCount
				})
			},
			init() {
				const topBar = http.request({
					url: "/api/index/top_bar"
				});
				const swipers = http.request({
					url: "/api/index/swipers"
				});
				Promise.all([topBar, swipers]).then(res => {
					this.tabs = res[0];
					this.swiperLists = res[1];
				})
			},
			changeTab(index) {
				this.addData(index)
			},
			addData(index) {
				http.request({
					url: `/api/index_list/${index}/data/1`
				}).then((res) => {
					this.secondDatas = res
				})
			},
			toSearch() {
				uni.navigateTo({
					url: "../search/search"
				})
			}
		},
		// 触底函数
		onReachBottom(e) {
			this.status = 'loading'
			this.getList(this.params.page + 1, this.params.pageSize)
			this.params.page += 1
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getList(page = 1, this.params.pageSize);
		}
	}
</script>

<style lang="scss" scoped>
	.tab-bar {
		height: 200rpx;
		width: 100%;
		line-height: 200rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.iconfont {
			font-size: 60rpx;
		}
	}
</style>